<template>
	<view class="container">
		<view class="moment_container">
			<view class="moment_list_card">
				<!-- 左侧头像 -->
				<view class="useravater">
					<image :src="data.avatar ||  defaultAvatar" mode=""></image>
				</view>
				<!-- 右侧内容区域 -->
				<view class="content" @click="$emit('detailAction')">
					<!-- 昵称 -->
					<text class="username">{{data.nickname}}</text>
					<!-- 内容 -->
					<text v-if="data.title" class="usertext">{{data.title}}</text>
					<!-- 图片 -->
					<view class="userimg">
						<block v-if="data.title">
							<mp-html :content="data.content" />
						</block>
					</view>
				</view>
			</view>
			<!-- 操作按钮 -->
			<view class="operation-view">
				<view class="operation-item">
					<u-icon name="thumb-up" label="点赞" labelPos="bottom" size="30"></u-icon>
				</view>
				<view class="operation-item">
					<u-icon name="share-square" label="分享" labelPos="bottom" size="30"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="comment-container">
			<view class="tn-flex">
				<view class="tn-margin tn-text-bold">
					最新评论 <text class="tn-padding-xs">({{commentCount}})</text>
				</view>
			</view>
			<!-- 评论 -->
			<view class="tn-margin" style="padding-bottom: 200rpx;" v-if="commentList.length>0">
				<view v-for="(item,pinglun) in commentList" :key="pinglun">
					<!-- 图标logo/头像 -->
					<view class="tn-flex tn-flex-col-center">
						<view class="logo-pic tn-shadow">
							<view class="logo-image">
								<view class="tn-shadow-blur"
									:style="'background-image:url('+item.avatar+');width: 60rpx;height: 60rpx;background-size: cover;'">
								</view>
							</view>
						</view>
						<view class="comment-content" style="margin: 0rpx 30rpx;">
							<view class="tn-text-bold">
								<text v-if="item.user_id==item.fa_user_id" style="color: orangered;">作者</text>
								{{item.nickname}}
							</view>
							<view style="padding-top: 5rpx;color: gray;">
								{{item.create_time}}
							</view>
							<view style="padding-top: 5rpx;color: black;">
								{{item.content}}
							</view>
						</view>
					</view>
			
					<view v-for="(itemhuifu,pinglunhuifu) in item.child" :key="pinglunhuifu"
						class="tn-padding-sm comment-content-1" style="margin: 8rpx 30rpx 8rpx 80rpx;border-radius: 10rpx;">
						<view>
							<text style="color: gray;">
								<text v-if="itemhuifu.user_id==itemhuifu.fa_user_id" style="color: orangered;">作者</text>
			
								{{itemhuifu.nickname}}:
							</text>
							<text class="tn-text-bold" v-if="itemhuifu.to_name">回复/</text>
							<text style="color: gray;" v-if="itemhuifu.to_name">:{{itemhuifu.to_name}}</text>
							<text style="line-height: 40rpx;color: black;">{{itemhuifu.content}}</text>
						</view>
						<view style="padding-top: 5rpx;color: gray;">
							{{item.create_time}}
						</view>
						<view style="padding-top: 5rpx;color: black;">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tabbar footerfixed dd-glass">
			<view class="bottom-view-input">
				<u-input placeholder="说点啥吧" confirmType="done" border="surround" />
			</view>
			<button class="tn-btn" style="background-color: $echo-main-color;">
				<text style="color: black;">发 送</text>
			</button>
		</view>
	</view>
</template>

<script>
	// import daoForumComment from './daoForumComment'
	import {
		getForumDetail
	} from '@/config/forum.js';

	export default {
		name: 'TemplateDetails',
		data() {
			return {
				serialNo: '', //帖子id
				data: null, //帖子详情
				defaultAvatar: '/static/images/pfp.png',
				commentCount: 0,
				commentList: []
			}
		},
		onLoad(option) {
			if (!option) return;

			this.serialNo = option.serialNo

			getForumDetail({
				serialNo: this.serialNo
			}).then(res => {
				console.log("res: " + JSON.stringify(res));
				this.data = res.data
			})

			this.getComments()
		},

		methods: {
			getComments() {
				this.commentCount = 0

				var string =
					'{"code":200,"msg":"ok","time":1665759151,"data":{"total":7,"per_page":10,"current_page":1,"last_page":1,"data":[{"id":119,"is_ding":0,"content":"牛逼啊","to_name":"","like_num":0,"user_id":166,"fa_user_id":55,"nickname":"匿名","avatar":"https:\/\/quan.51duoke.cn\/uploads\/head.jpg","create_time":"2022-10-14 11:50:50","ziji_id":null,"is_like":false,"child":[]},{"id":118,"is_ding":0,"content":"1","to_name":"","like_num":0,"user_id":165,"fa_user_id":55,"nickname":"匿名","avatar":"https:\/\/quan.51duoke.cn\/uploads\/head.jpg","create_time":"2022-10-14 05:13:42","ziji_id":null,"is_like":false,"child":[]},{"id":115,"is_ding":0,"content":"123","to_name":"","like_num":0,"user_id":150,"fa_user_id":55,"nickname":"匿名","avatar":"https:\/\/quan.51duoke.cn\/uploads\/head.jpg","create_time":"2022-10-09 01:57:04","ziji_id":null,"is_like":false,"child":[]},{"id":106,"is_ding":0,"content":"123","to_name":"","like_num":0,"user_id":74,"fa_user_id":55,"nickname":"BAD GU","avatar":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTIqSkExvs7GfSsIzBaw7yoofuWMgfkDsGibWRExpIfvNrSrTKaXGgejSJQx1slZ4NnHVBlL7upal9Q\/132","create_time":"2022-09-27 11:22:40","ziji_id":null,"is_like":false,"child":[]},{"id":105,"is_ding":0,"content":"测试","to_name":"","like_num":0,"user_id":69,"fa_user_id":55,"nickname":"momo","avatar":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/Q3auHgzwzM69NB0uQib2ZlOWWMSVsOHs91f8MqH3Z90LkKptF1JWSxZfCMojvr3Vs75mhpmicWfooaMrpmbQiatSg\/132","create_time":"2022-09-26 18:42:04","ziji_id":null,"is_like":false,"child":[]},{"id":101,"is_ding":0,"content":"测试自己和自己评论","to_name":"","like_num":2,"user_id":55,"fa_user_id":55,"nickname":"刘涛","avatar":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/DYAIOgq83ep4iaauHk6qmCH5cqRORFxcU3OIXMKQZ1A6QQyWVjOH9ltDVFRt3JtaQlZH4iabK9MwnjwnMAbLYBJg\/132","create_time":"2022-09-25 11:35:58","ziji_id":null,"is_like":false,"child":[{"id":116,"content":"555","to_name":"刘涛","like_num":0,"user_id":150,"fa_user_id":55,"nickname":"匿名","avatar":"https:\/\/quan.51duoke.cn","create_time":"2022-10-09 01:57:34","ziji_id":null,"is_like":false}]},{"id":65,"is_ding":0,"content":"我自己就觉得帅咋的","to_name":"","like_num":0,"user_id":50,"fa_user_id":55,"nickname":"我的乖乖","avatar":"https:\/\/quan.51duoke.cn\/uploads\/1\/file\/20221004\/6b9fcd7d0556d7c58e7f66f83e0276d9.png","create_time":"2022-09-24 12:23:51","ziji_id":null,"is_like":false,"child":[{"id":97,"content":"df ","to_name":"我的乖乖","like_num":0,"user_id":2,"fa_user_id":55,"nickname":"且听风铃","avatar":"https:\/\/quan.51duoke.cn","create_time":"2022-09-24 22:12:54","ziji_id":null,"is_like":false},{"id":99,"content":"545555","to_name":"我的乖乖","like_num":0,"user_id":50,"fa_user_id":55,"nickname":"我的乖乖","avatar":"https:\/\/quan.51duoke.cn\/uploads\/1\/file\/20221004\/6b9fcd7d0556d7c58e7f66f83e0276d9.png","create_time":"2022-09-25 11:18:13","ziji_id":null,"is_like":false},{"id":100,"content":"爱你么么啊 🥲😍😍🥲🥲","to_name":"且听风铃","like_num":0,"user_id":55,"fa_user_id":55,"nickname":"刘涛","avatar":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/DYAIOgq83ep4iaauHk6qmCH5cqRORFxcU3OIXMKQZ1A6QQyWVjOH9ltDVFRt3JtaQlZH4iabK9MwnjwnMAbLYBJg\/132","create_time":"2022-09-25 11:34:51","ziji_id":null,"is_like":false}]}]}}'
				var daoForumComment = JSON.parse(string)
				console.log('string ====', string);
				this.commentList = daoForumComment.data.data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F6F6F6;
	}
	
	.moment_container {
		background-color: white;
		padding: 30rpx;

		.moment_list_card {
			display: flex;

			// 左侧头像
			.useravater {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			// 右侧内容区域
			.content {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-left: 20rpx;

				.username {
					color: #0056b3;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.usertext {
					margin-bottom: 10rpx;
					font-size: 32rpx;
				}

				.userimg {
					display: flex;
					flex-wrap: wrap;
					padding: 20rpx 0;
				}

				.uservideo {
					padding: 20rpx 0;
				}
			}
		}
		
		.operation-view {
			display: flex;
			flex-direction: row;
			margin-top: 16rpx;
		
			.operation-item {
				flex: 1;
				justify-content: center;
				align-items: center;
				display: flex;
			}
		}
	}

	.tn-btn {
		margin-right: 30rpx;
		width: 160rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	
	.comment-container {
		margin-top: 20rpx;
		background-color: white;
		
		.tn-flex {
			display: -webkit-flex;
			display: flex;
			
		}
		
		.comment-content {
			display: flex;
			flex-direction: column;
		}
		
		.comment-content-1 {
			display: flex;
			flex-direction: column;
			background-color: #C6D1D8;
		}
		
		.tn-margin {
			margin: 30rpx;
		}
		
		/* 头像 start */
		.logo-image {
			width: 60rpx;
			height: 60rpx;
			position: relative;
		}
		
		.logo-pic {
			background-size: cover;
			background-repeat: no-repeat;
			background-position: top;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 50%;
			overflow: hidden;
		}
	}

	/* 底部 start*/
	.footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 999;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.tabbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
		padding-left: 10rpx;
		padding-right: 10rpx;
		
		.bottom-view-input {
			flex: 1;
			margin: 30rpx;
			border-radius: 12rpx;
			border-color: gray;
		}
	}

	/* 毛玻璃*/
	.dd-glass {
		width: 100%;
		backdrop-filter: blur(20rpx);
		-webkit-backdrop-filter: blur(20rpx);
	}

	.tn-text-bold {
		font-weight: bold;
	}

	.tn-padding-xs {
		padding: 10rpx;
	}

	.tn-padding-sm {
		padding: 20rpx;
	}

	.tn-margin {
		margin: 30rpx;
	}

	.tn-flex-row-between {
		justify-content: space-between;
	}

	.tn-flex-col-center {
		align-items: center;
	}

	.tn-flex-row-left {
		justify-content: flex-start;
	}

	/* flex子元素水平方向对齐方式 */
	.tn-flex-row-center {
		justify-content: center;
	}

	.tn-flex-direction-row {
		flex-direction: row;
	}

	.tn-flex-nowrap {
		flex-wrap: nowrap;
	}

	.tn-text-center {
		text-align: center;
	}

	.tn-flex-row-left {
		justify-content: flex-start;
	}

	.tn-shadow {
		box-shadow: 6rpx 6rpx 8rpx $uni-border-color;
	}
</style>
